<template>
    <div :id="'bar-line'+time" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
// import { createPinia } from 'pinia'
import * as echarts from 'echarts/core';
import {
  ToolboxComponent,
  ToolboxComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption
} from 'echarts/components';
import {
  BarChart,
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// import { useChartsStore } from '@/stores/charts';
// const pinia = createPinia();
// const chartStore = useChartsStore(pinia)
echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
  | ToolboxComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | BarSeriesOption
  | LineSeriesOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
const time = new Date().getTime()
onMounted(() => {
    var chartDom = document.getElementById('bar-line'+time)!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
            }
        },
        toolbox: {
            show: false,
            feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
            }
        },
        legend: {
            show: true,
            // left: 0,
            // align: 'center',
            textStyle: {color: '#fff'},
        },
        grid: {
            top: 30,
            left: 0,
            right: '4%',
            bottom: 0,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: props.data.xAxisDataList,
                axisLabel: {
                    show: true,
                    color: '#1793df',
                    formatter: function (value) { return value; }
                },
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: '出库量/箱',
            nameTextStyle: {color: 'rgba(180, 180, 180, 1)'},
            axisLabel: {
                show: true,
                color: '#1793df',
                formatter: '{value}'
            },
            // left: 0,
            // align: 'left',
            // min: 0,
            // // max: 250,
            // interval: 50,
            },
            {
                type: 'value',
                name: '积压率',
                nameTextStyle: {color: 'rgba(180, 180, 180, 1)'},
                // min: 0,
                // max: 25,
                // interval: 5,
                axisLabel: {
                    show: true,
                    color: '#1793df',
                    formatter: '{value}'
                }
            }
        ],
        series: props.data.seriesDataList
    };

    option && myChart.setOption(option);

    myChart.on('click', function(params) {
        // 控制台打印数据的名称
        console.log(params);
    });
})
</script>

<style scope>
</style>